<template>
  <v-card>
    <v-toolbar class="elevation-0">
      <v-btn color="primary" @click="addGoods">新增商品</v-btn>
      <v-spacer />
      <v-flex xs3>
        状态：
        <v-btn-toggle mandatory v-model.lazy="filter.saleable">
          <v-btn flat>全部</v-btn>
          <!-- <v-btn flat :value="true">上架</v-btn> -->
          <!-- <v-btn flat :value="false">下架</v-btn> -->
        </v-btn-toggle>
      </v-flex>
      <v-flex xs3>
        <v-text-field
          append-icon="search"
          label="搜索"
          single-line
          hide-details
          v-model="filter.search"
        />
      </v-flex>
    </v-toolbar>
    <v-divider />
    <v-data-table
      :headers="headers"
      :items="goodsList"
      :pagination.sync="pagination"
      :total-items="totalGoods"
      :loading="loading"
      class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <td class="text-xs-center">{{ props.item.hh }}</td>
        <td class="text-xs-center">{{ props.item.pinm }}</td>
        <td class="text-xs-center">{{ props.item.xingh}}</td>
        <td class="text-xs-center">{{ props.item.plbm }}</td>
        <td class="text-xs-center">{{ props.item.plmc }}</td>
        <td class="text-xs-center">{{ props.item.tm }}</td>

<!--        <td class="text-xs-center">{{ props.item.zhongl }}</td>-->
<!--        <td class="text-xs-center">{{ props.item.chang }} * {{ props.item.kuan }} * {{ props.item.gao }}</td>-->
        <td class="justify-center layout px-0">
          <v-btn icon @click="editGoods(props.item)">
            <i class="el-icon-edit" />
          </v-btn>
     
          <!-- <v-btn icon v-if="props.item.saleable">上架</v-btn> -->
          <!-- <v-btn icon v-else>下架</v-btn> -->
        </td>
      </template>
    </v-data-table>
    <!--弹出的对话框-->
    <v-dialog max-width="800" v-model="show" persistent scrollable>
      <v-card>
        <!--对话框的标题-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{isEdit ? '修改' : '新增'}}商品</v-toolbar-title>
          <v-spacer />
          <!--关闭窗口的按钮-->
          <v-btn icon @click="closeWindow">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>
        <!--对话框的内容，表单-->
        <v-card-text class="px-3"  >
          <goods-form
            :oldGoods="oldGoods"
            :step="step"
            @close="closeWindow"
            :is-edit="isEdit"
            ref="goodsForm"
          />
        </v-card-text>
        <!--底部按钮，用来操作步骤线-->

        <!-- <v-card-actions class="elevation-10"> -->
        <!-- <v-flex class="xs3 mx-auto"> -->
        <!-- <v-btn @click="previous" color="primary" :disabled="step === 1">上一步</v-btn> -->
        <!-- <v-btn @click="next" color="primary" :disabled="step === 4">下一步</v-btn> -->
        <!-- </v-flex> -->
        <!-- </v-card-actions> -->
      </v-card>
    </v-dialog>
  </v-card>
</template>

<script>
// 导入自定义的表单组件
import GoodsForm from "./GoodsForm";

export default {
  name: "goods",
  data() {
    return {
      filter: {
        saleable: true, // 上架还是下架
        search: "" // 搜索过滤字段
      },
      totalGoods: 0, // 总条数
      goodsList: [], // 当前页品牌数据
      loading: true, // 是否在加载中
      pagination: {}, // 分页信息
      headers: [
        { text: "货号", align: "center", sortable: false, value: "hh" },
        { text: "品名", align: "center", sortable: false, value: "pinm" },
        { text: "型号", align: "center", sortable: false, value: "xingh" },
        { text: "品类编码", align: "center",value: "plbm", sortable: false },
        { text: "品类名称", align: "center",value: "plmc", sortable: false },
        { text: "条码", align: "center", value: "tm", sortable: true },
        // { text: "重量", align: "center",value: "zhongl", sortable: false },
        // { text: "尺寸（毫米）", align: "center",value: "chang", sortable: false },
        { text: "操作", align: "center",value: "id", sortable: false }
      ],
      show: false, // 控制对话框的显示
      oldGoods: {}, // 即将被编辑的商品信息
      isEdit: false, // 是否是编辑
      step: 1 // 子组件中的步骤线索引，默认为1
    };
  },
  mounted() {
    // 渲染后执行
    // 查询数据
    this.getDataFromServer();
  },
  watch: {
    pagination: {
      // 监视pagination属性的变化
      deep: true, // deep为true，会监视pagination的属性及属性中的对象属性变化
      handler() {
        // 变化后的回调函数，这里我们再次调用getDataFromServer即可
        this.getDataFromServer();
      }
    },
    filter: {
      // 监视搜索字段
      handler() {
        this.getDataFromServer();
      },
      deep: true
    }
  },
  methods: {
    getDataFromServer() {
      var that = this;
      // 从服务的加载数的方法。
      // 发起请求
      this.$http
        .get("item/item/page", {
          params: {
            key: this.filter.search, // 搜索条件
            // saleable: this.filter.saleable === 0 ? null : this.filter.saleable, // 上下架
            page: this.pagination.page, // 当前页
            rows: this.pagination.rowsPerPage // 每页大小
          }
        })
        .then(resp => {
          // 这里使用箭头函数
          this.goodsList = resp.data.items;
          this.totalGoods = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        })
        .catch(e => {
          that.goodsList = [];
          that.totalGoods = 0;
          that.loading =false;
        });
    },
    addGoods() {
      // 修改标记
      this.isEdit = false;
      // 控制弹窗可见：
      this.show = true;
      // 把oldBrand变为null
      this.oldGoods = {};
      oldGoods.spuDetail = {};
      this.goods = {};
    },
    async editGoods(oldGoods) {
      // 发起请求，查询商品详情和skus
      oldGoods.spuDetail = await this.$http.loadData(
        "item/item/page?queryid=" + oldGoods.hh
      );
      // oldGoods.skus = await this.$http.loadData("/item/sku/list?id=" + oldGoods.id);
      // 修改标记
      this.isEdit = true;
      // 控制弹窗可见：
      this.show = true;
      // 获取要编辑的goods
      this.oldGoods = oldGoods;
    },
    closeWindow() {
      console.log(1);
      // 重新加载数据
      this.getDataFromServer();
      // 关闭窗口
      this.show = false;
      // 将步骤调整到1
      this.step = 1;
    }
  },
  components: {
    GoodsForm
  }
};
</script>

<style scoped>
</style>
